<template>
  <el-menu
    class="nb"
  >
    <el-menu-item v-if="isLogin" index="login" @click="handleLogin"><el-icon><User/></el-icon><span>未登录</span></el-menu-item>
    <el-menu-item index="discover" @click="$router.push('discover')">
      <span class="iconfont icon-zhuye"></span>
      <span class="ml10">发现音乐</span>
    </el-menu-item>
    <el-menu-item index="recommend" @click="$router.push('recommend')">
      <span class="iconfont icon-tuijian"></span>
      <span class="ml10">推荐歌单</span>
    </el-menu-item>
    <el-menu-item index="newmusic" @click="$router.push('newmusic')">
      <span class="iconfont icon-shiting"></span>
      <span class="ml10">最新音乐</span>
    </el-menu-item>
    <!-- <el-menu-item index="newmv"><el-icon><VideoCamera/></el-icon>最新MV</el-menu-item> -->
    <el-menu-item v-if="!isLogin" index="songList" @click="handleSongList(loveList)">
      <span class="iconfont icon-aixin-xian"></span>
      <span class="ml10">喜欢的音乐</span>
    </el-menu-item>
    <el-sub-menu v-if="!isLogin" index="collectLists">
      <template #title>
        <span class="iconfont icon-shoucang"></span>
        <span class="ml10">我收藏的歌单</span>
      </template>
      <el-menu-item v-for="(item,index) in collectLists" :key="index" @click="handleSongList(item)" :index="item.name">
        <span class="iconfont icon-songlist"></span>
        <span class="ml10 oh">{{item.name}}</span>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu v-if="!isLogin" index="createLists">
      <template #title>
        <span class="iconfont icon-wochuangjiande"></span>
        <span class="ml10">我创建的歌单</span>
      </template>
      <el-menu-item v-for="(item,index) in createLists" :key="index" @click="handleSongList(item)" :index="item.name">
        <span class="iconfont icon-songlist"></span>
        <span class="ml10 oh">{{item.name}}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
  <el-dialog v-model="showDialog" destroy-on-close top="24vh" width="350px" center>
    <ScanLogin :getScanLoginShow="getScanLoginShow"/>
  </el-dialog>
</template>

<script setup>
import ScanLogin from '../components/ScanLogin.vue'
import {ref,computed} from 'vue'
import {useUserStore} from '@/store/userInfo'
import {useMusicStore} from '@/store/music'
import {useRouter} from 'vue-router'
const router=useRouter()
const userStore=useUserStore()
const musicStore=useMusicStore()
const isLogin=ref(!userStore.isShowUserInfo)
// 登录
let showDialog=ref(false)
let handleLogin=()=>{
  showDialog.value=true
}
let getScanLoginShow=(isShow)=>{
  showDialog.value=isShow
  console.log(isShow);
  console.log(userStore.isShowUserInfo);
  router.go(0)
}

// 我喜欢的音乐
let loveList=ref(userStore.playList[0])
// 我收藏的歌单
let collectLists=computed(()=>{
  return userStore.playList.filter(item=>item.userId!=userStore.uid)
})
// 我创建的歌单
let createLists=computed(()=>{
  const [first,...arr]=userStore.playList.filter(item=>item.userId==userStore.uid)
  return arr
})
// 保存当前歌单
let handleSongList=(item)=>{
  musicStore.saveCurSongList(item)
  router.push({path:'/songList'},()=>{})
}
</script>

<style>
.el-dialog{
  height: 420px;
}
</style>
